<!--
  @description 流程表达式
  @author wqy
  @date 2020-06-09 15:54:43
-->
<template>
  <div class="app_container">
    <div class="baseBorderRadius bgWhite">
      <div class="search_wrap">
        <el-form :data="oldSearchData" ref="search_wrap" label-width="120px">
          <el-row :gutter="10">
            <template v-for="(item, index) in searchDataList">
              <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8" :key="index">
                <el-form-item :label="item.label">
                  <el-input v-model.trim="oldSearchData[item.code]" :placeholder="`请输入${item.label}`" size="small" style="width:100%"></el-input>
                </el-form-item>
              </el-col>
            </template>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <!-- 按钮区域 -->
              <div class="btn_wrap">
                <el-button type="primary" class="btnYellow" size="small" icon="el-icon-search" @click="searchFunc">搜 索</el-button>
                <el-button size="small" icon="el-icon-refresh-right" @click="resetFunc">重 置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 操作按钮区域 -->
      <div class="handle_wrap">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="addFunc">新 增</el-button>
        <el-dropdown split-button size="small" v-if="multipleSelection.length > 0" @command="handleClick(0, ...arguments)">
          批量操作
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="del">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 表格区域 -->
      <div class="table_wrap">
        <div class="table_box">
          <Table :theadData="theadData" :tableData="tableData" :hasCheck="true" v-model="multipleSelection">
            <template v-slot:ope="{ scope }">
              <div>
                <el-button type="text" size="mini" @click="editFunc(scope.row)">编辑</el-button>
                <span style="padding: 0 6px;color: #bbb;">|</span>
                <el-dropdown type="primary" @command="handleListClick(scope.row, ...arguments)">
                  <span class="el-dropdown-link">
                    更多
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="del">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </Table>
        </div>
        <div class="page_box" v-show="totalSize">
          <el-pagination background :current-page="currentPage" :page-sizes="[10, 20, 30, 40,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" :title="titleDialog" width="500px">
      <div class="operate_container" style="box-shadow: none;">
        <div class="operate_item" style="width: 100%">
          <div class="operate_left">表达式名称：</div>
          <div class="operate_right">
            <el-input v-model.trim="addBdsMc" placeholder="请输入表达式名称" size="small" style="width:100%"></el-input>
          </div>
        </div>
        <div class="operate_item" style="width: 100%">
          <div class="operate_left">表达式：</div>
          <div class="operate_right">
            <el-input v-model.trim="bdsName" placeholder="请输入表达式" size="small" style="width:100%"></el-input>
          </div>
        </div>
        <div class="operate_item" style="width: 100%">
          <div class="operate_left">表达式类型：</div>
          <div class="operate_right">
            <el-select v-model="addType" style="width:100%">
              <el-option label="任务节点" value="1" key="1"></el-option>
              <el-option label="流转条件" value="2" key="2"></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div style="text-align: center;">
        <el-button type="primary" @click="addSureFunc">确 定</el-button>
        <el-button @click="dialogVisible=false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 引入表格组件
import Table from "@/components/table/table.vue";
export default {
  components: {
    Table
  },
  data() {
    return {
      // 查询字段
      oldSearchData: {
        expression: "",
        name: ""
      },
      // 查询字段
      searchData: {},
      // 查询字段列表
      searchDataList: [
        { label: "表达式名称", code: "name", type: "text" },
        { label: "表达式", code: "expression", type: "text" }
      ],
      // 分页
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      // 表头数据
      theadData: [
        { name: "#", code: "index", width: 80 },
        { name: "表达式名称", code: "name" },
        { name: "表达式", code: "expression" },
        { name: "表达类型", code: "typeName" },
        { name: "操作", code: "cz", slotName: "ope", width: 130 }
      ],
      // 表格数据
      tableData: [],
      // 选中的表格数据
      multipleSelection: [],
      syncType: "normal",
      // 添加编辑弹窗
      dialogVisible: false,
      titleDialog: "新增",
      addBdsMc: "",
      bdsName: "",
      addType: "1",
      currentId: "" //当前选中的列
    };
  },
  mounted() {
    this.handleCurrentChange(1);
  },
  methods: {
    /**
     * @name getTableData
     * @description 获取数据
     * @author wqy
     * @date 2020-06-09 15:45:43
     */
    async getTableData() {
      let data = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        expression: this.oldSearchData.expression,
        name: this.oldSearchData.name
      };
      const obj = {
          1: '任务节点',
          2: '流转条件'
      };
      const res = await this.$store.dispatch("lcgl/findListLcbds", data);
      let list = res.data.list || [];
      list.map((item, index) => {
        item.index = this.pageSize * (this.currentPage - 1) + 1 + index;
        item.typeName = obj[item.type];
      });
      this.tableData = list;
      this.totalSize = res.data.total;
    },
    /**
     * @name handleCurrentChange
     * @description 切换当前页码
     * @author wqy
     * @date 2020-06-09 15:45:43
     */
    async handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    /**
     * @name handleSizeChange
     * @description 切换每页多少条
     * @author wqy
     * @date 2020-06-09 15:45:43
     */
    async handleSizeChange(val) {
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    /**
     * @name searchFunc
     * @description 搜索方法
     * @author wqy
     * @date 2020-06-09 15:45:43
     */
    searchFunc() {
      this.handleCurrentChange(1);
    },
    /**
     * @name resetFunc
     * @description 重置方法
     * @author wqy
     * @date 2020-06-09 15:45:43
     */
    resetFunc() {
      this.oldSearchData = {
        expression: "",
        name: ""
      };
      this.handleCurrentChange(1);
    },
    /**
     * @name addFunc
     * @description 新增
     * @author cjs1992
     * @date 2020-05-11 20:31:17
     */
    addFunc() {
      this.addBdsMc = "";
      this.bdsName = "";
      this.addType = "1";
      this.currentId = '';
      this.dialogVisible = true;
    },
    /**
     * @name editFunc
     * @description 编辑方法
     * @author cjs1992
     * @date 2020-05-13 16:29:20
     */
    editFunc(data) {
      this.bdsName = data.expression;
      this.addBdsMc = data.name;
      this.addType = data.type + ""; //(1任务节点  2流转条件)
      this.currentId = data.id;
      this.dialogVisible = true;
    },
    /**
     * @name addSureFunc
     * @description 新增或者编辑确定
     * @author wqy
     * @date 2020-06-09 16:14:09
     */
    async addSureFunc() {
      let data = {
        expression: this.bdsName,
        name: this.addBdsMc,
        type: this.addType //(1任务节点  2流转条件)
      };
      if (this.currentId == "") {
        const res = await this.$store.dispatch("lcgl/addLcbds", data);
        this.$message({
          type: "success",
          message: "新增成功!"
        });
      } else {
        Object.assign(data, {
          id: this.currentId
        });
        const res = await this.$store.dispatch("lcgl/editLcbds", data);
        this.$message({
          type: "success",
          message: "编辑成功!"
        });
      }

      this.dialogVisible = false;
      this.handleCurrentChange(1);
    },

    /**
     * @name handleClick
     * @description 下拉操作
     * @author cjs1992
     * @date 2020-05-11 19:49:20
     */
    handleClick(data, command) {
      let str = "";
      if (data === 0) {
        // 批量删除
        if (this.multipleSelection.length === 0) {
          this.$message({
            type: "warning",
            message: "请选择要批量操作的数据"
          });
          return;
        }
        str = this.multipleSelection.map(item => item.id).join(",");
      } else {
        str = data.id;
      }
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const res = await this.$store.dispatch("lcgl/deleteLcbds", {
            ids: str
          });
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.handleCurrentChange(1);
        })
        .catch(() => {});
    },
    /**
     * @name handleListClick
     * @description 批量操作列表
     * @author cjs1992
     * @date 2020-05-13 15:47:52
     */
    async handleListClick(data, command) {
      const { isDbSynch, id } = data;
      if (command === "del") {
        // 删除
        this.handleClick(data, "del");
        return;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.search_wrap {
  padding: 20px 20px 10px;
}
.btn_wrap {
  padding-left: 20px;
}
.search_wrap {
  border-bottom: 1px solid #eee;
  >>> {
    .el-form {
      .el-form-item {
        margin-bottom: 10px;
        .el-form-item__label {
          color: #666;
          font-weight: 400;
        }
        .el-select {
          width: 100%;
        }
        // width: 25%;
        // display: inline-block;
        // vertical-align: top;
      }
    }
  }
}
.table_wrap {
  padding: 10px;
}
.page_box {
  padding: 10px 0;
  text-align: center;
}
.el-dropdown-link {
  color: #02c58d;
  cursor: pointer;
}
</style>
